<template>
    <div class="hotgoods">
        <h3>人气推荐</h3>
        <ul>
            <li v-for="item in hotGoodsList" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.list_pic_url" alt="">
                <div class="right">
                    <h4>{{item.name}}</h4>
                    <p>{{item.goods_brief}}</p>
                    <span>{{item.retail_price | formatMoney }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "",
    props: ["hotGoodsList"],
    data() {
        return {};
    },

    components: {},

    computed: {},

    created() {},

    mounted() {},

    methods: {
        gotoDetail(item){
            console.log(item);
            this.$router.push({'path':'/productDetail',query:{id:item.id}});
        }
    },
};
</script>
<style lang="less" scoped>
.hotgoods{
    h3{
        text-align: center;
        height: 80px;
        line-height: 80px;
        font-size: 20px;
        color: black;
    }
    li{
        display: flex;
        flex-wrap: wrap;
        height: 104px;
        margin-bottom: 10px;
        background-color: #fafafa;
        img{
            width: 88px;
            height: 88px;
            margin: 10px;
        }
        .right{
            flex: 1;
            h4{
                height: 40px;
                font-weight: 500;
                line-height: 40px;
                font-size: 18px;
            }
            p{
                height: 28px;
                line-height: 28px;
                font-size: 13px;
            }
            span{
                color: #8d0000;
                font-size: 12px;
            }
        }
    }
}
</style>